<template>
  <div class="linkshow">
    <NavbarIndex />
    <div class="container">
      <router-link class="btn btn-primary mb-3 mr-3" to="/linkadd">申请友情链接</router-link>
<p><small class="text-danger">友情链接自由申请，我们会定期对网址进行检查，无法访问将会被删除，如果您的网站被删除，可再次申请。</small></p>
        <div class="card mb-3" v-for="(items,index) in linkIndex" :key="items.id">
          <h5 class="card-header">{{getTitleById(index)}}</h5>
          <div class="card-body">
            <a :href="item.url" target="_blank" class="btn btn-link" v-for="item in items" :key="item.id"> {{item.title}} </a>
          </div>
        </div>
    </div>
    <FooterIndex />
  </div>
</template>

<script>
// @ is an alias to /src
import FooterIndex from "@/components/FooterIndex.vue";
import NavbarIndex from "@/components/NavbarIndex.vue";
import { mapState, mapActions, mapGetters } from "vuex";

export default {
  name: "linkshow",
  components: {
    NavbarIndex,
    FooterIndex
  },
  data () {
    return {
    };
  },
  created () {
    this['type/setList']()
    this['link/setIndex']()
     window.scrollTo(0, 0)
  },
  methods: {
    ...mapActions(['type/setList', 'link/setIndex']),
  },
  computed: {
    ...mapState({ typeList: state => state.type.list, linkIndex: state => state.link.index }),
    ...mapGetters('type', ['getTitleById', 'getByModuleName'])
  }
};
</script>

<style scoped>
@media (min-width: 576px) {
  .card-columns {
    column-count: 1;
  }
}
@media (min-width: 768px) {
  .card-columns {
    column-count: 2;
  }
}
</style>

